<!DOCTYPE html>
<html >
<head>
	<title>What's up</title>
	<style>
		.aa{
			position: absolute;
			z-index: 1;
		}
		.bb{
			position: absolute;
			z-index: 2;
		}
		.cc{
			position: absolute;
			z-index: 3;
		}
		.dd{
			position: absolute;
			z-index: 4;
		}
		.ee{
			position: absolute;
			z-index: 5;
		}
		.ff{
			position: absolute;
			z-index: 6;
		}
		.an{animation:mymove 10s linear infinite;-webkit-animation:mymove 10s linear infinite; }
		@keyframes mymove{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(-180deg);}
			100%{transform:rotate(-360deg);}
		}
		@-webkit-keyframes mymove{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
		.bn{animation:mymove 20s linear infinite;-webkit-animation:mymove 20s linear infinite; }
		@keyframes mymove{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(-180deg);}
			100%{transform:rotate(-360deg);}
		}
		@-webkit-keyframes mymove{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
		.cn{animation:mymove 30s linear infinite;-webkit-animation:mymove 30s linear infinite; }
		@keyframes mymove{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(-180deg);}
			100%{transform:rotate(-360deg);}
		}
		@-webkit-keyframes mymove{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
		.dn{animation:mymove 45s linear infinite;-webkit-animation:mymove 45s linear infinite; }
		@keyframes mymove{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(-180deg);}
			100%{transform:rotate(-360deg);}
		}
		@-webkit-keyframes mymove{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
		.en{animation:mymove 60s linear infinite;-webkit-animation:mymove 60s linear infinite; }
		@keyframes mymove{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(-180deg);}
			100%{transform:rotate(-360deg);}
		}
		@-webkit-keyframes mymove{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
	</style>


</head>
<body style="height:2000px; width:2000px" background="try.png">
<div align="center" class="ff" >
	<img src="c1.png" class="an" usemap="#mymap">
	<map name="mymap">
		<area shape="circle" href="layer3.html" coords="850,350,500">
	</map>
</div>
<div align="center" class="ee">
	<img src="c2.png" class="bn">
</div>
<div align="center" class="dd">
	<img src="c3.png" class="cn">
</div>
<div align="center" class="cc">
	<img src="c4.png" class="dn">
</div>
<div align="center" class="bb">
	<img src="c5.png" class="en">
</div>
<div align="center" class="aa">
	<img src="try.png">
</div>
</body>
</html>